<template>
	<div class="wishPage">
		<mu-paper :z-depth="1" class="demo-loadmore-wrap" >
			<mu-container ref="container" class="demo-loadmore-content">
			<mu-load-more :loading="loading" @load="load">
				<div class="note" :style ="note"></div>
				<div class="list">
					<div class="box">
						<div class="pic">
							<img :src="info.photo" alt="">
						</div>
						<div class="info">
							<div class="step1">
								<span>{{info.name}}</span>
								<p>{{info.org_name}}</p>
							</div>
							<div class="step2">
								<span>{{month}}月{{day}}日是Ta的入党纪念日</span>
								<span>快送上你的祝福！</span>
							</div>
						</div>
						<div class="card">
							<mu-grid-list class="gridlist-inline-demo" :cell-height="250" :cols="1.65">
								<mu-grid-tile v-for="(item,index) in photoList" :key="index">
									<div class="pic_list" :class="item.select == false?'':'active'">
										<img :src="item.photo" alt="">
										<div class="box_u" @click="setActive(index)">
											<img v-if="item.select==false" src="@as/img/zhufu_tuss.png" alt="" >
											<img v-if="item.select==true" src="@as/img/sr_haha@2x.png" alt="" >
											<span>{{item.photo_name}}</span>
										</div>
									</div>
								</mu-grid-tile>
							</mu-grid-list>
						</div>
						<div class="wish_yu" v-if="photoList.length>0">
							<div class="zi">
								<p>{{BLcontent.content}}</p>
							</div>
							<div class="btn">
								<div @click="exchange()">
									<img src="@as/img/shengri_ai@2x.png" alt="">
									<span>换一换</span>
								</div>
							</div>
						</div>
						<div class="send" @click="GiveWish()">
							<span>发送祝福</span>
						</div>
						<div class="blessing">
							<div class="title">
								<div class="tix">
									<span>祝福墙</span>
									<span class="num"> ({{listLength}})</span>
								</div>
								<div class="xian"></div>
							</div>
							<div class="bar" v-for="(item,index) in BlessingWall" :key="index">
								<div class="col1">
									<div class="tx">
										<img :src="item.head_photo" alt="">
									</div>
									<div class="xx">
										<span>{{item.name}}</span>
										<p>{{item.org_name}}</p>
									</div>
								</div>
								<div class="col2">
									<p>
										{{item.content}}
									</p>
								</div>
								<div class="col3" :style="{backgroundImage:'url('+item.photo+')',backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">
									<div class="bq">
										<span>{{item.photo_name}}</span>
									</div>
								</div>
								<div class="col4">
									<span>{{(item.create_time) | time}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</mu-load-more>
			</mu-container>
		</mu-paper>
        <div class="loading" v-if="loadOver&&p!=1" :class="{'notpageOne':p>1}">{{loaded}}</div>
		<!--<div class="loading" v-if="loadOver">{{loaded}}</div>-->
	</div>
</template> 

<script>
	export default {
			data() {
				return {
					refreshing: false,
					loading: false,
					notMore: true,
                    loadOver:false,
					loaded:'加載更多...',
					eid:'',
					p:1,
					page:5,
					info:{},//个人信息
					wishList:[],//祝福语
					listLength:'',
					BLcontent:{},//接收随机赋值过来的祝福语
					photoList:[],//祝福卡片
					photo_id:'',//卡片id
					BlessingWall:[],//祝福墙
					month:'',//月
					day:'',//日
					normal: {
						checkbox: false,
					},
					note: {
						backgroundImage: "url(" + require("@as/img/shengri_xixi@2x.png") + ")",
						backgroundRepeat: "no-repeat",
						backgroundSize: "100%",
					}
				}
			},
			mounted() {
				this.$progress.done();
			},
			methods: {
				setActive: function(index) {
					this.photo_id = this.photoList[index].id;
					let selected = this.photoList[index].select;
					let obj = this.photoList[index];
					// let obj = {};
					// obj.select = true;
					if(this.photoList[index].select==false){
						selected = true;
					}else{
						selected = false;
					}
					this.photoList.forEach((item,idx)=>{
						item.select = false;
					});
					obj = 	this.photoList[index];
					obj.select = selected;
					this.photoList.splice(index, 1, obj);
				},
				async	getPhotoList(){
                    let that = this;
                    let params = {
                        party_member_id : that.eid,
                        p : 1,
                        page : that.page,
                    }
                    const url = `/app/Organization/send_blessing`;
                    let res = await that.$http.get(url, params);
                    if(res.data.photo.length){
                        that.photoList = res.data.photo;
                        console.log(that.photoList);
                        that.photoList.forEach((item,index)=>{
                            item.select = false;
                        });
                    }
                    if(res.data.content.length){
                        that.wishList =res.data.content;
                        let max = (that.wishList.length)-1;
                        let index =parseInt( Math.round(Math.random() * max));
                        console.log(that.wishList);
                        console.log(index)
                        that.BLcontent = that.wishList[index];
                        console.log(that.BLcontent);
                    }
				},
				async Szhufu () {
					let that = this;
					// debugger
					try {
						let params = {
							party_member_id : that.eid,
							p : that.p,
							page : that.page,
						}
						const url = `/app/Organization/send_blessing`;
						let res = await that.$http.get(url, params);
						// that.$progress.done()
						if (res.code === 200) {
							that.info = res.data.info;
							var date = new Date((res.data.info.party_time)*1000);
							that.month = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
							that.day = date.getDate();
                            that.BlessingWall.push(...res.data.list);
                            // that.BlessingWall =[ ...this.BlessingWall,...res.data.list];
                            that.listLength = (that.BlessingWall).length;
							if (res.data.list.length == 0) {
								that.loaded = "没有更多";
								that.loading = false;
								that.notMore = false;
								that.loadOver =true
								return;
							}
							that.loading = false;
						}
					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
				load() {
                    if (!this.loadOver) {
                        this.loading = true;
                        clearTimeout(this.method);
                        this.method = setTimeout(() => {
                            this.p = this.p + 1;
                            this.Szhufu();
                            this.loading =false;
                        }, 1500);
                    }

					// console.log(222222)
					// this.loading = true;
					// if (this.notMore) {
					// 	clearTimeout(this.method);
					// 	this.method = setTimeout(() => {
					// 		this.p = this.p + 1;
					// 		this.Szhufu();
					// 	}, 500);
					// }
				},
				// 换一换
				async exchange () {  
					let that = this;
                    let max = (that.wishList.length)-1;
                    let index =parseInt( Math.round(Math.random() * max));
                    that.BLcontent = that.wishList[index];
					// try {
					// 	let params = {
					// 		party_member_id : that.eid,
					// 	}
					// 	const url = `/app/Organization/send_blessing`
					// 	let res = await that.$http.get(url, params)
					// 	// that.$progress.done()
					// 	if (res.code === 200) {
					// 		that.BlessingWall = res.data.list;
					// 		that.listLength = (that.BlessingWall).length;
					// 		that.wishList = res.data.content;
					// 		let max = (that.wishList.length)-1;
					// 		let index =parseInt( Math.round(Math.random() * max));
					// 		that.BLcontent = that.wishList[index]
					// 	}
					// } catch (e) {
					// 	console.log('​catch -> e', e)
					// }
				},
				// 发送祝福
				async GiveWish () {  
					let that = this;
					if(!this.photoList.length){
					    this.$alert('暂无可用的祝福文案,请通知管理员先添加数据','提示')
                        return false;
                    }
					try {
					    if(!that.photo_id){
                            that.photo_id =this.photoList[0].id;
						}
						let params = {
							uid:JSON.parse(Cookies.get('user_71ydj')).id,
							party_member_id : that.eid,
							photo_id : that.photo_id,
							content_id : that.BLcontent.id,
						}
						const url = `/app/Organization/birthday_blessing`
						let res = await that.$http.post(url, params)
						that.$progress.done()
						if (res.code === 200) {
							this.$toast.success(res.msg);
							// that.BlessingWall=[];
							console.log(333,that.BlessingWall);
							window.location.reload();
							// that.Szhufu();
							
						}else {
							this.$toast.error(res.msg);
						}
					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
			},
			created(){
				this.eid = this.$route.query.id; 
				this.Szhufu();
				this.getPhotoList();
				// this.exchange()
			}
	}
</script>


<style scoped lang="scss">
	/*/deep/ .mu-infinite-scroll{*/
		/*height:0!important;*/
	/*}*/
	/*.wishPage /deep/ .mu-infinite-scroll{*/
		/*display: none;*/
		/*height: 0;*/
	/*}*/
	/deep/ .mu-checkbox{
		color: #FFF;
		opacity: .7;
	}
	.mu-load-more /deep/ .mu-circle-spinner{
		border-color: #e5e5e5;
	}
	/deep/ .mu-checkbox-checked{
		color: #eb4d44;
	}
  .note{
		padding: 38px 15px 15px 15px;
		box-sizing: border-box;
		width:100%;
		height:502.5px;
		
	
	}
.wishPage{
    .loading {
        width: 100%;
        font-size: 14px;
        color: #dddddd;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 24px;
        &.notpageOne{
            margin-top: -20px;
        }
    }
}
	.list{
		width:100%;
		padding: 0 15px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		margin-top:-410px;
		z-index: 99;
		.box{
			width:100%;
			min-height: 574px;
			padding: 0 15px;
			box-sizing: border-box;
			background: #FFF;
			border-radius: 5px;
			display: flex;
			flex-direction: column;
			box-shadow: 0px 6px 10px 2px #f1f1f1;
			.pic{
				width:60px;
				height:60px;
				overflow: hidden;
				border-radius: 50%;
				position: absolute;
				left:50%;
				top:-25px;
				transform: translate(-50%);
				img{
					width:100%;
					height:100%;
				}
			}
			.info{
				width:100%;
				height:283px;
				background: url("~@as/img/shengri_enen@2x.png") center center
				no-repeat;
				background-size: 100% 100%;
				.step1{
					width:100%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin-top: 45px;
					span{
						font-size: 18px;
						color: #333;
						font-weight: bold;
					}
					p{
						font-size: 12px;
						color: #999;
					}
				}
				.step2{
					width:100%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin-top: 20px;
					span{
						font-size: 14px;
						color:#eb4d44;
						font-weight: bold;
					}
				}
			}
			.card{
				margin-top: 15px;
				width:100%;
				height: 130px;
				overflow: hidden;
				.gridlist-inline-demo {
						display: flex;
						flex-wrap: nowrap;
						overflow-x: auto;
				}
				.mu-grid-tile-titlebar {
						display: none;
				}
				.pic_list{
					width:180.5px;
					height:101px;
					margin-top: 2px;
					overflow: hidden;
					border-radius: 5px; 
					box-shadow: 0 4px 5px 2px #f3f3f3;
					// box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-right: 15px;
					border-radius: 5px;
					display: flex;
					position: relative;
					img{
						width:100%;
						height:100%;
					}
					.box_u{
						position: absolute;
						top:0;
						left:0;
						width:100%;
						height:100%;
						z-index: 99;
						display: flex;
						justify-content: space-between;
						flex-direction: column;
						padding: 8px 8px;
						box-sizing: border-box;
						img{
							width:20.5px;
							height:20.5px;
						}
						span{
							font-size: 14px;
							color: #FFF;
							font-weight: bold;
						}
					}
				}
			}
			.active{
				border:3px solid #eb4d44;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
			}
			.wish_yu{
				width:100%;
				padding: 15px 15px;
				box-sizing: border-box;
				background: #f8f8f8;
				border-radius: 5px;
				.zi{
					width:100%;
					min-height:110px;
					p{
						font-size: 12px;
						line-height: 1.8;
						color: #aaa;
					}
				}
				.btn{
					width:100%;
					display: flex;
					justify-content: flex-end;
					div{
						width:60px;
						height:20px;
						background: #fff;
							border-radius: 20px;
							display: flex;
							justify-content: center;
							align-items: center;
						img{
							width:13px;
							height:13px;
						}
						span{
							font-size: 12px;
							color: #ffad19;
							margin-left: 2px;
						}
					}
				}
			}
			.send{
				width:100%;
				height:40px;
				background: #eb4d44;
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 25px;
				span{
					color: #FFF;
					font-size: 14px;
				}
			}
			.blessing{
				width:100%;
				padding: 15px 0;
				margin-top: 60px;
				display: flex;
				flex-direction: column;
				.title{
					width:100%;
					padding: 0 15px;
					display: flex;
					justify-content: space-between;
					align-items:center;
					margin-bottom: 15px;
					.tix{
						display: flex;
						align-items: center;
						span{
							font-size: 22px;
							color: #000;
							font-weight: bold;
						}
						.num{
							font-size: 12px;
							color:#999;
							font-weight: normal;
							margin-left: 5px;
						}
					}
					.xian{
						width:60%;
						height:1px;
						background: #ddd;
					}
				}
				.bar{
					width:100%;
					padding: 15px 15px;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					.col1{
						width:100%;
						display: flex;
						align-items: center;
						.tx{
							width:40px;
							height:40px;
							overflow: hidden;
							border-radius: 50%;
							img{
								width:100%;
								height:100%;
							}
						}
						.xx{
							display: flex;
							flex-direction: column;
							margin-left: 8px;
							span{
								color: #333;
								font-size: 14px;
							}
							p{
								font-size: 12px;
								color: #999;
							}
						}
					}
					.col2{
						width:100%;
						margin-top: 15px;
						p{
							font-size: 12px;
							line-height: 1.8;
							color: #333;
						}
					}
					.col3{
						width:100%;
						height:169px;
						border-radius: 5px;
						margin-top: 15px;
						position: relative;
						.bq{
							width:81px;
							height:28.5px;
							background:-webkit-linear-gradient(left,#eb4e44,#f47447);
							background:-o-linear-gradient(right,#eb4e44,#f47447);
							background:-moz-linear-gradient(right,#eb4e44,#f47447);
							background:linear-gradient(to right,#eb4e44,#f47447);
							position: absolute;
							left:0;
							bottom: 0;
							border-bottom-left-radius:5px;
							border-top-right-radius:15px;
							display: flex;
							justify-content: center;
							align-items: center;
							span{
								font-size: 12px;
								color: #FFF;
							}
						}
					}
					.col4{
						width:100%;
						margin-top: 15px;
						display: flex;
						justify-content: flex-end;
						span{
							font-size: 12px;
							color: #999;
						}
					}
				}
				/*.loading {*/
					/*width: 100%;*/
					/*font-size: 14px;*/
					/*color: #dddddd;*/
					/*display: flex;*/
					/*align-items: center;*/
					/*justify-content: center;*/
				/*}*/

			}
		}
	}
	.wishPage /deep/.mu-elevation-1{
		box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
		-webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
	}
</style>